<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Title</title>
  <script src="js/stomp-7.0.0.js"></script>
</head>

<body>
<div>
  <h3>配置</h3>
  <label for="urlText">URL：</label>
  <input id="urlText" type="text" value="ws://127.0.0.1:8080/ws">
  <br>
  <label for="usernameText">用户名：</label>
  <input id="usernameText" type="text" value="ali">
  <button id="connectBtn">连接</button>
  <h4>连接错误信息：</h4>
  <textarea id="errorMsg" readonly cols="50" rows="5"></textarea>
</div>
<div>
  <h3>广播形式</h3>
  <label for="broadcastSendText">发送地址：</label>
  <input id="broadcastSendText" type="text" value="/app/broadcast">
  <br>
  <label for="broadcastText">发送内容：</label>
  <input id="broadcastText" type="text" value="发送广播">
  <button id="broadcastBtn" disabled>发送</button>
  <h4>广播消息：</h4>
  <label for="broadcastSubscribeText">订阅地址：</label>
  <input id="broadcastSubscribeText" type="text" value="/topic/broadcast">
  <br>
  <textarea id="broadcastMsg" readonly cols="50" rows="5"></textarea>
</div>
<div>
  <h3>角色形式</h3>
  <label for="userSendText">发送地址：</label>
  <input id="userSendText" type="text" value="/app/sendToUser/">
  <br>
  <label for="userSendUsernameText">发送用户：</label>
  <input id="userSendUsernameText" type="text" value="ali">
  <br>
  <label for="userText">发送内容：</label>
  <input id="userText" type="text" value="发送到用户">
  <button id="userBtn" disabled>发送</button>
  <h4>用户消息：</h4>
  <label for="userSubscribeText">订阅地址：</label>
  <input id="userSubscribeText" type="text" value="/user/queue/sendToUser">
  <br>
  <textarea id="userMsg" readonly cols="50" rows="5"></textarea>
</div>
</body>
<script>
  const urlText = document.getElementById('urlText')
  const usernameText = document.getElementById('usernameText')
  const connectBtn = document.getElementById('connectBtn')
  const broadcastSendText = document.getElementById('broadcastSendText')
  const broadcastText = document.getElementById('broadcastText')
  const broadcastSubscribeText = document.getElementById('broadcastSubscribeText')
  const broadcastBtn = document.getElementById('broadcastBtn')
  const broadcastMsg = document.getElementById('broadcastMsg')
  const errorMsg = document.getElementById('errorMsg')
  const userSendText = document.getElementById('userSendText')
  const userSendUsernameText = document.getElementById('userSendUsernameText')
  const userSubscribeText = document.getElementById('userSubscribeText')
  const userText = document.getElementById('userText')
  const userBtn = document.getElementById('userBtn')
  const userMsg = document.getElementById('userMsg')

  let isConnect = false
  const stomp = new StompJs.Client({
    reconnectDelay: 5000,
    onConnect: connectCallback,
    onWebSocketClose: closeCallback,
    onWebSocketError: errorCallback
  })

  /**
   * 连接/断开按钮
   */
  connectBtn.addEventListener('click', function () {
    if (!isConnect) {
      connectBtn.innerText = '连接中...'
      connectBtn.setAttribute('disabled', 'true')
      connect()
    } else {
      disconnect()
    }
  })

  /**
   * 连接
   */
  function connect() {
    stomp.brokerURL = urlText.value
    stomp.connectHeaders = {
      username: usernameText.value
    }
    stomp.activate()
  }

  /**
   * 连接成功回调
   */
  function connectCallback() {
    isConnect = true
    connectStatus(true)
    // 广播消息
    stomp.subscribe(broadcastSubscribeText.value, function (res) {
      broadcastMsg.value = res.body + '\n' + broadcastMsg.value
    })
    // 用户消息
    stomp.subscribe(userSubscribeText.value, function (res) {
      userMsg.value = res.body + '\n' + userMsg.value
    })
  }

  /**
   * 连接关闭回调
   */
  function closeCallback(e) {
    isConnect = false
    connectStatus(false)
    errorMsg.value = '连接关闭回调' + '\n' + errorMsg.value
  }

  /**
   * 连接错误回调
   */
  function errorCallback(e) {
    isConnect = false
    connectStatus(false)
    errorMsg.value = '连接错误回调' + '\n' + errorMsg.value
  }

  /**
   * 断开
   */
  function disconnect() {
    if (isConnect) {
      stomp.deactivate()
      connectStatus(false)
    }
  }

  /**
   * 改变连接状态显示
   */
  function connectStatus(status) {
    connectBtn.removeAttribute('disabled')
    broadcastBtn.removeAttribute('disabled')
    if (status) {
      connectBtn.innerText = '断开'
      userBtn.removeAttribute('disabled')
    } else {
      connectBtn.innerText = '连接'
      broadcastBtn.setAttribute('disabled', 'true')
      userBtn.setAttribute('disabled', 'true')
    }
  }

  /**
   * 发送广播消息
   */
  broadcastBtn.addEventListener('click', function () {
    stomp.publish({destination: broadcastSendText.value, body: broadcastText.value})
  })

  /**
   * 发送用户消息
   */
  userBtn.addEventListener('click', function () {
    stomp.publish({destination: userSendText.value + userSendUsernameText.value, body: userText.value})
  })

</script>

</html>
